<template>
	<div class="login_bg">
		<div class="bg_img"><img src="../../assets/img/public/login-bg.jpg" /></div>
		<div class="main_box">
			<h3 class="sys_title">后台管理系统</h3>
			<div class="main">
				<div class="r1">
					<div class="input_box">
						<i class="iconfont icon-user"></i>
						<el-input v-model="submitMsg.user" maxlength="24" placeholder="请输入用户名" style="width: 400px;"></el-input>
					</div>
					<!-- <p class="err_hint" v-if="user_hint">{{user_hint}}</p> -->
				</div>
				<div class="r1 r2">
					<div class="input_box">
						<i class="iconfont icon-ziyuanxhdpi"></i>
						<el-input type="password" v-model="submitMsg.password" maxlength="32" placeholder="请输入密码" style="width: 400px;"></el-input>
					</div>
					<!-- <p class="err_hint" v-if="password_hint">{{password_hint}}</p> -->
				</div>
				<div class="r1 r3">
					<div class="input_box">
						<i class="iconfont icon-ecurityCode"></i>
						<el-input v-model="submitMsg.code" type="tel" maxlength="8" placeholder="请输入验证码错误" style="width: 400px;"></el-input>
						<img src="" alt="" class="phone_code" @click.stop="sendCode()" />
					</div>
					<!-- <p class="err_hint" v-if="code_hint">{{code_hint}}</p> -->
				</div>
				<div class="login_btn" @click="loginFN()"><span>登&nbsp;&nbsp;录</span></div>
			</div>
		</div>
	</div>
</template>

<script>
	import { isRequired, isPassWord } from '@/assets/js/verification/verification.js';

	export default {
		data() {
			return {
				submitMsg: {
					user: '1234',
					password: 'dfsdf2423424',
					code: '22424',
					user_hint: '',
					password_hint: '',
					code_hint: ''
				},
				//表格校验
				rules: {
					logo: [{
						required: true,
						message: '请上传店铺logo',
						trigger: 'blur'
					}],
					shopName: [{
						required: true,
						message: '请输入店铺名称',
						trigger: 'blur'
					}]
				}
			};
		},
		computed: {},
		//局部路由钩子
		beforeRouteEnter(to, from, next) {
			let _token = localStorage.getItem('token') ? localStorage.getItem('token') : '';
			if(!_token) {
				next();
			} else {
				next('/home');
			}
		},
		created() {},
		mounted() {},
		methods: {
			loginFN() {
				if(!isRequired(this.submitMsg.user)) {
					this.$notify.error({
						title: '错误',
						message: '用户名不能为空'
					});
					return;
				}
				if(!isPassWord(this.submitMsg.password)) {
					this.$notify.error({
						title: '错误',
						message: '密码为6-16位数字和字母组合'
					});
					return;
				}
				if(!isRequired(this.submitMsg.code)) {
					this.$notify.error({
						title: '错误',
						message: '请输入验证码'
					});
					return;
				}
				//console.log(this.submitMsg)
				localStorage.setItem('token', 'ad5f4as545adgsd5gsd5g4sg');
				this.$router.push({
					path: '/home'
				});
			},
			//确定 - 按钮
			confirmBtn() {
				//console.log(this.$refs.submitMsg.validate);
				this.$refs.submitMsg.validate(valid => {
					if(valid) {
						console.log('aaaaa');
					} else {
						return false;
					}
				});
			},
			//发送验证码
			sendCode() {
				this.$message.success('验证码获取成功');
				// this.$message.error('恭喜你，这是一条成功消息');
			}

			// this.$refs.submitMsg.resetFields();
		}
	};
</script>

<style lang="scss" scoped>
	.login_bg {
		width: 100%;
		height: 100vh;
		display: flex;
		justify-content: center;
		align-items: center;
		position: relative;
		.bg_img {
			display: flex;
			justify-content: center;
			align-items: center;
			img {
				height: 100%;
			}
		}
		.main_box {
			position: absolute;
			z-index: 1;
			left: 50%;
			top: 50%;
			transform: translate(-50%, -50%);
			width: 500px;
			padding: 30px 20px 40px;
			background: rgba(0, 0, 0, 0.5);
			display: flex;
			justify-content: center;
			align-items: center;
			flex-direction: column;
			.sys_title {
				font-size: 32px;
				font-weight: 400;
				color: #673ab7;
				color: #fff;
				margin: 0px auto 30px auto;
				text-align: center;
				font-weight: bold;
				text-shadow: 0px 1px 0px #c0c0c0, 0px 2px 0px #b0b0b0, 0px 3px 0px #a0a0a0, 0px 4px 0px #909090, 0px 5px 10px rgba(0, 0, 0, 0.9);
			}
			.main {
				.r1 {
					padding: 10px 0;
					.input_box {
						position: relative;
					}
					i {
						display: block;
						font-size: 20px;
						color: #999;
						font-weight: 700;
						position: absolute;
						left: 10px;
						top: 50%;
						margin-top: -10px;
						z-index: 10;
					}
					/deep/ input {
						padding-left: 40px !important;
					}
				}
				.r2 {}
				.phone_code {
					width: 100px;
					height: 30px;
					background: #666;
					position: absolute;
					right: 10px;
					top: 50%;
					transform: translateY(-50%);
					cursor: pointer;
				}
				.login_btn {
					margin: 10px 0 0 0;
					height: 50px;
					border-radius: 6px;
					border: none;
					color: #fff;
					background: rgba(7, 196, 168, 0.5);
					display: flex;
					justify-content: center;
					align-items: center;
					cursor: pointer;
					span {
						font-size: 18px;
					}
					&:hover {
						background: rgba(7, 196, 168, 0.8);
					}
				}
				.err_hint {
					color: red;
				}
			}
		}
	}
</style>